import Picker from '../picker.vue'
import DatePanel from '../panel/date.vue'
import DateRangePanel from '../panel/date-range.vue'

const getPanel = function (type) {
  if (type === 'daterange' || type === 'datetimerange') {
    return DateRangePanel
  }
  return DatePanel
}

export default {
  mixins: [Picker],

  props: {
    field: Object
  },

  computed: {
    type () {
      return this.field && this.field.datePickerType ? this.field.datePickerType : 'date'
    }
  },

  watch: {
    type (type) {
      if (this.picker) {
        this.unmountPicker()
        this.panel = getPanel(type)
        this.mountPicker()
      } else {
        this.panel = getPanel(type)
      }
    }
  },

  beforeMount () {
    this.panel = getPanel(this.type)
  }
}
